<template>
  <div class="track-edit-form">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="80px"
      @submit.prevent="handleSubmit"
    >
      <el-row :gutter="16">
        <el-col :span="12">
          <el-form-item label="状态" prop="status">
            <el-select v-model="formData.status" placeholder="选择状态">
              <!-- 配送员只能选择运输中和已送达两个状态 -->
              <el-option label="运输中" :value="3" />
              <el-option label="已送达" :value="4" />
            </el-select>
          </el-form-item>
        </el-col>
        
        <el-col :span="12">
          <el-form-item label="时间" prop="timestamp">
            <el-date-picker
              v-model="formData.timestamp"
              type="datetime"
              placeholder="选择时间"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DDTHH:mm:ss.sssZ"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="位置" prop="location">
        <el-input
          v-model="formData.location"
          placeholder="请输入位置信息"
          clearable
        />
      </el-form-item>

      <el-form-item label="操作员" prop="operator">
        <el-input
          v-model="formData.operator"
          placeholder="请输入操作员姓名"
          clearable
        />
      </el-form-item>

      <el-form-item label="备注" prop="remark">
        <el-input
          v-model="formData.remark"
          type="textarea"
          :rows="3"
          placeholder="请输入备注信息"
          maxlength="200"
          show-word-limit
        />
      </el-form-item>

      <el-form-item label="坐标" prop="coordinates">
        <el-row :gutter="8">
          <el-col :span="12">
            <el-input
              v-model.number="coordinatesInput.lng"
              placeholder="经度"
              type="number"
              step="0.000001"
            />
          </el-col>
          <el-col :span="12">
            <el-input
              v-model.number="coordinatesInput.lat"
              placeholder="纬度"
              type="number"
              step="0.000001"
            />
          </el-col>
        </el-row>
      </el-form-item>

      <el-form-item>
        <div class="form-actions">
          <el-button @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="handleSubmit" :loading="submitting">
            保存修改
          </el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'

interface TrackActivity {
  id?: string
  content: string
  timestamp: string
  type: string
  color: string
  location: string
  operator?: string
  remark?: string
  status: number
  coordinates?: [number, number]
}

interface Props {
  trackData: TrackActivity
}

interface Emits {
  (e: 'submit', trackData: Partial<TrackActivity>): void
  (e: 'cancel'): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const formRef = ref<FormInstance>()
const submitting = ref(false)

// 表单数据
const formData = reactive({
  status: 1,
  timestamp: '',
  location: '',
  operator: '',
  remark: '',
})

// 坐标输入
const coordinatesInput = reactive({
  lng: 0,
  lat: 0
})

// 状态配置
const statusConfig = {
  1: { type: 'info', color: '#909399', content: '订单已确认' },
  2: { type: 'primary', color: '#409EFF', content: '已发货' },
  3: { type: 'primary', color: '#409EFF', content: '运输中' },
  4: { type: 'warning', color: '#E6A23C', content: '正在派送中' },
  5: { type: 'success', color: '#67C23A', content: '包裹已签收' }
}

// 表单验证规则
const formRules: FormRules = {
  status: [
    { required: true, message: '请选择状态', trigger: 'change' }
  ],
  timestamp: [
    { required: true, message: '请选择时间', trigger: 'change' }
  ],
  location: [
    { required: true, message: '请输入位置信息', trigger: 'blur' },
    { min: 2, max: 100, message: '位置信息长度在 2 到 100 个字符', trigger: 'blur' }
  ],
  operator: [
    { required: true, message: '请输入操作员姓名', trigger: 'blur' },
    { min: 2, max: 20, message: '操作员姓名长度在 2 到 20 个字符', trigger: 'blur' }
  ]
}

// 计算属性
const coordinates = computed((): [number, number] | undefined => {
  if (coordinatesInput.lng && coordinatesInput.lat) {
    return [coordinatesInput.lng, coordinatesInput.lat]
  }
  return undefined
})

// 初始化表单数据
onMounted(() => {
  if (props.trackData) {
    Object.assign(formData, {
      status: props.trackData.status,
      timestamp: props.trackData.timestamp,
      location: props.trackData.location,
      operator: props.trackData.operator || '',
      remark: props.trackData.remark || '',
    })
    
    if (props.trackData.coordinates) {
      coordinatesInput.lng = props.trackData.coordinates[0]
      coordinatesInput.lat = props.trackData.coordinates[1]
    }
  }
})

// 方法
const handleSubmit = async () => {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    submitting.value = true
    
    const config = statusConfig[formData.status as keyof typeof statusConfig]
    
    const trackData: Partial<TrackActivity> = {
      content: config.content,
      timestamp: formData.timestamp,
      type: config.type,
      color: config.color,
      location: formData.location,
      operator: formData.operator,
      remark: formData.remark,
      status: formData.status,
      coordinates: coordinates.value
    }
    
    emit('submit', trackData)
    
    ElMessage.success('轨迹更新成功')
  } catch (error) {
    console.error('表单验证失败:', error)
  } finally {
    submitting.value = false
  }
}

const handleCancel = () => {
  emit('cancel')
}
</script>

<style scoped>
.track-edit-form {
  background: #fafbfc;
  border-radius: 8px;
  padding: 20px;
  border: 1px solid #e2e8f0;
}

.form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

:deep(.el-form-item__label) {
  font-weight: 500;
  color: #374151;
}

:deep(.el-input__wrapper) {
  border-radius: 8px;
}

:deep(.el-select .el-input__wrapper) {
  border-radius: 8px;
}

:deep(.el-textarea__inner) {
  border-radius: 8px;
}

@media (max-width: 768px) {
  .track-edit-form {
    padding: 16px;
  }
  
  .form-actions {
    justify-content: stretch;
  }
  
  .form-actions .el-button {
    flex: 1;
  }
}
</style> 